<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/index.css">
  <title>引入js组件（pagination.js）</title>

</head>
<body>
<div id="app" >
  <query-component  @query="handleQuery"></query-component>
  <!--显示 table-->
  <el-table :data="tableData" style="width: 100%" >
    <el-table-column prop="name" label="角色名称"></el-table-column>
    <el-table-column label="权限">
      <template #default="{ row }">
        <span v-for="permission in row.permissions" :key="permission.id">{{ permission.name }}</span>
      </template>
    </el-table-column>
  </el-table>
  <pagination :page="currentPage" :total=pageTotal :size="pageSize"
              @page-change="handlePageChange"></pagination>
  <!--<el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChang"
          :current-page=pageNum
          :page-sizes="[5, 10, 15]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=pageTotal>
  </el-pagination>-->
</div>
</body>

<script src="js/axios.js"></script>
<script src="js/comm.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/util.js"></script>

<script src="components/pagination2.js"></script>
<script src="components/find.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        findNr:'',
        tableData: [],
        loading: false,
        pageSize:5,
        currentPage:0,
        pageTotal:0,
        sort:'id',
        order:'asc',
      }
    },
    methods: {
      getData(v) {
        this.loading=true
        axios.post('/GetListData', {
          nr:this.findNr,
          page:this.currentPage,
          size:this.pageSize,
          sort:this.sort,
          order:this.order,
        }).then((res) => {
          if (res.data.code==200) {
            this.loading=false
            this.pageTotal=res.data.total
            this.tableData=res.data.data
          }
        });
      },
      handleQuery(keyword) {
        console.log('查询关键字:', keyword);
        this.findNr=keyword
        this.getData()
        // 可以在这里进行数据请求或者其他处理
      },
      // handleSizeChange(val){
      //   this.pageSize=val
      //   this.tableData=[]
      //   this.getData()
      // },
      handlePageChange(val,size){
        this.currentPage=val
        this.pageSize=size
        this.getData()
      },
    },
    mounted(){
      this.getData()
    }
  })
</script>
</html>